<template>
	<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		<el-breadcrumb-item>咨询师信息管理</el-breadcrumb-item>
		<el-breadcrumb-item>擅长领域管理</el-breadcrumb-item>
	</el-breadcrumb>

	<el-form :inline="true" :model="queryInfo" class="demo-form-inline" style="padding: 15px 0;">
		<el-form-item label="擅长领域">
			<!-- 修正：参数名与后端Talent实体类的talentName匹配 -->
			<el-input v-model="queryInfo.talentName" placeholder="请输入擅长领域" clearable @clear="queryDataList" />
		</el-form-item>

		<el-form-item>
			<el-button type="primary" @click="queryDataList">搜索</el-button>
			<el-button type="primary" @click="add">新增擅长领域</el-button>
			<el-button type="danger" @click="batchRemove">批量删除</el-button>
		</el-form-item>
	</el-form>

	<el-table :data="dataList" border row-key="id" style="width: 100%" @selection-change="handleSelectionChange">
		<el-table-column type="selection" width="55" />
		<el-table-column property="id" label="ID" width="100" />
		<!-- 修正：显示字段与后端实体类的talentName匹配 -->
		<el-table-column property="talentName" label="擅长领域" />

		<el-table-column fixed="right" label="操作" min-width="120">
			<template #default="scope">
				<el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
				<el-button type="danger" size="small" @click="remove(scope.row.id)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>

	<el-pagination v-model:current-page="queryInfo.pageNum" v-model:page-size="queryInfo.pageSize"
		:page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="total"
		@size-change="handleSizeChange" @current-change="handleCurrentChange" />

	<el-dialog :title="title" v-model="dialogFormVisible" width="500" @close="cancle">
		<el-form :model="talentData" label-width="100">
			<el-form-item label="擅长领域">
				<!-- 修正：绑定字段与后端实体类的talentName匹配 -->
				<el-input v-model="talentData.talentName" autocomplete="off" placeholder="请输入擅长领域"></el-input>
			</el-form-item>
		</el-form>

		<template #footer>
			<div class="dialog-footer">
				<el-button @click="cancle">取 消</el-button>
				<el-button type="primary" @click="confirm">确 定</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
	import { ElMessage, ElMessageBox } from 'element-plus';
	import { getCurrentInstance, onMounted, reactive, ref } from 'vue';

	// 修正：查询参数与后端Talent实体类匹配
	const queryInfo = reactive({
		talentName: '', // 匹配后端实体类的talentName
		pageNum: 1,
		pageSize: 10
	})

	const total = ref(0)
	const dataList = ref([])

	// 获取全局axios实例
	const axios = getCurrentInstance().appContext.config.globalProperties.axios;

	// 查询数据列表（修正接口路径与后端TalentController一致）
	const queryDataList = () => {
		axios.get('/talent/page', { // 接口路径为/talent/page（后端控制器定义）
			params: queryInfo
		}).then((resp) => {
			if (resp.code === 200) {
				dataList.value = resp.data.list;
				total.value = resp.data.total;
			} else {
				ElMessage.error('查询失败: ' + (resp.message || '未知错误'));
			}
		}).catch((err) => {
			console.error('查询错误:', err);
			ElMessage.error('网络错误，请重试');
		});
	}

	// 页面加载时查询数据
	onMounted(() => {
		queryDataList()
	})

	// 批量选择的ID列表
	const multipleSelection = ref<number[]>([])

	// 处理表格选择变化
	const handleSelectionChange = (val : any[]) => {
		multipleSelection.value = val.map(item => item.id);
	}

	// 修正：分页参数更新（补充pageSize和pageNum的赋值）
	const handleSizeChange = (val : number) => {
		queryInfo.pageSize = val; // 更新页大小
		queryDataList();
	};
	const handleCurrentChange = (val : number) => {
		queryInfo.pageNum = val; // 更新页码
		queryDataList();
	};

	// 对话框相关
	const title = ref('新增擅长领域')
	const dialogFormVisible = ref(false)

	// 修正：表单数据与后端实体类匹配（使用talentName，变量名统一为talentData）
	const talentData = ref({
		talentName: "", // 匹配后端实体类的talentName
		id: ""
	})

	// 取消对话框
	const cancle = () => {
		talentData.value = {
			talentName: "",
			id: ""
		}
		dialogFormVisible.value = false
	}

	// 确认提交（新增/修改）
	const confirm = () => {
		if (!talentData.value.talentName) {
			ElMessage.warning('请输入擅长领域名称');
			return;
		}

		if (talentData.value.id) {
			// 修改操作（修正接口路径为/talent）
			axios.put('/talent', talentData.value)
				.then((resp) => {
					if (resp.code === 200) {
						ElMessage.success('修改成功');
					} else {
						ElMessage.error('修改失败: ' + (resp.message || '未知错误'));
					}
					queryDataList();
					dialogFormVisible.value = false;
				});
		} else {
			// 新增操作（修正接口路径为/talent）
			axios.post('/talent', talentData.value)
				.then((resp) => {
					if (resp.code === 200) {
						ElMessage.success('新增成功');
					} else {
						ElMessage.error('新增失败: ' + (resp.message || '未知错误'));
					}
					queryDataList();
					dialogFormVisible.value = false;
				});
		}
	}

	// 打开新增对话框
	const add = () => {
		title.value = '新增擅长领域';
		talentData.value = { talentName: "", id: "" };
		dialogFormVisible.value = true;
	}

	// 编辑擅长领域（修正字段绑定）
	const edit = (row : any) => {
		title.value = '编辑擅长领域';
		// 从row中取talentName赋值（与后端返回字段匹配）
		talentData.value = {
			id: row.id,
			talentName: row.talentName
		};
		dialogFormVisible.value = true;
	}

	// 单个删除（修正接口路径）
	const remove = (id : number) => {
		ElMessageBox.confirm(
			'此操作将永久删除该擅长领域，是否继续?',
			'提示',
			{ type: 'warning' }
		).then(() => {
			axios.delete(`/talent/${id}`) // 接口路径与后端控制器匹配
				.then(resp => {
					if (resp.code === 200) {
						ElMessage.success('删除成功');
					} else {
						ElMessage.error('删除失败: ' + (resp.message || '未知错误'));
					}
					queryDataList();
				});
		}).catch(() => {
			ElMessage.info('已取消删除');
		});
	}

	// 批量删除（修正接口路径）
	const batchRemove = () => {
		if (multipleSelection.value.length === 0) {
			ElMessage.warning('请先选择要删除的擅长领域');
			return;
		}

		ElMessageBox.confirm(
			`此操作将永久删除选中的 ${multipleSelection.value.length} 条擅长领域，是否继续?`,
			'提示',
			{ type: 'warning' }
		).then(() => {
			axios.delete('/talent', { // 接口路径与后端控制器匹配
				params: { ids: multipleSelection.value.join(',') }
			}).then((resp) => {
				if (resp.code === 200) {
					ElMessage.success('批量删除成功');
				} else {
					ElMessage.error('批量删除失败: ' + (resp.message || '未知错误'));
				}
				queryDataList();
			});
		}).catch(() => {
			ElMessage.info('已取消删除');
		});
	}
</script>

<style scoped>
	.el-breadcrumb {
		border-bottom: 1px solid #EEEEEE;
		padding-bottom: 15px;
		margin-bottom: 20px;
	}

	.demo-form-inline .el-input {
		--el-input-width: 220px;
	}

	.el-table {
		margin-bottom: 20px;
	}

	.el-pagination {
		margin-top: 15px;
		text-align: right;
	}
</style>